<template>
    <div class="cms-notice">
        <div class="cms-notice-content">
            <div class="notice-title">最新公告</div>
            <hr/>
            <div class="item-title" v-for="item in noticeItem">
                <div class="item-title-start" @click="toContent(item)">{{item.noticeTitle}}</div>
                <div class="item-title-end">发布时间:  {{item.createDate}}</div>
            </div>
        </div>

    </div>
</template>

<script>
    import noticeApi from '@/api/noticeApi'
    export default {
        name: "CmsNotice",
        data(){
            return{
                noticeItem:[]
            }
        },
        methods:{
            toContent(item){
                let content={
                    type:"notice",
                    id:item.id
                }
                let routeData = this.$router.resolve({ path: '/content', query: content });
                window.open(routeData.href, '_blank');
            }
        },
        created:async function(){
            let res = await noticeApi.noticeDetail("");
            if (res.code == '200'){
                this.noticeItem = res.data
            }
        }
    }
</script>

<style scoped>
    .cms-notice{
        background-color: #FFFFFF;
        width: 100%;
        height: auto;
        float: left;
    }
    .cms-notice-content{
        text-align: center;
        max-width:1540px;
        width: 100%;
        /*margin: 0 auto;*/
        margin-left: 10%;
        margin-bottom: 80px;
        float: left;
        height: auto;
    }
    .notice-title{
        margin-top: 15px;
        font-size: 25px;
        margin-bottom: 10px;
        color: #ff7908;
        text-align: left;
    }
    .item-title{
        height: 70px;
        line-height: 70px;
        text-align: left;
        font-size: 20px;
        cursor: pointer;
        border-bottom: 1px #e6e6e6 solid;
    }
    .item-title:hover{
        color: #ff7908;
    }
    .item-title-start{
        float: left;
    }
    .item-title-end{
        font-size: 16px;
        float: right;
    }
</style>